<template>
    <div class="page">
        <!-- 头部导航 -->
        <div class="head" @click="top">
            <img src="@/assets/school/school.jpg" alt="">
            <span>选择你感兴趣的标签</span>
        </div>
        <div class="menuediv">

            <label v-for="(item,index) in tablist" :key="index" :class="item.active?'active':''" @click="choose(item.id)">{{item.major_name}}</label>

        </div>
        <button class="finished" @click="finished()">完成</button>
    </div>
</template>
<script>
    import {majortab} from "../../request/expert";

    export default {
        name: '',
        data() {
            return {
                tablist:[],
                majorid:""
            }
        },
        props: {

        },
        components:{
        },
        mounted() {

            this.majorid=this.$route.params.majorid;

            this.gettablist();

        },
        methods:{
            top:function(){
                this.$router.go(-1)
            },
            gettablist:function () {
                var that=this;
                majortab().then(res => {
                    var tablist=res.data.result.data;
                    for(var i=0;i<tablist.length;i++)
                    {
                        if(that.majorid==tablist[i].id)
                        {
                            tablist[i].active=true;
                            that.majorid=tablist[i].id;
                        }
                        else
                        {
                            tablist[i].active=false;
                        }


                    }
                    that.tablist=tablist;
                });
            },
            
            choose:function (id) {
                var that=this;
                var tablist=that.tablist;
                for(var i=0;i<tablist.length;i++)
                {
                    if(id==tablist[i].id)
                    {
                        tablist[i].active=true;
                        that.majorid=tablist[i].id;
                    }
                    else
                    {
                        tablist[i].active=false;
                    }


                }
                that.tablist=tablist;
            },
            finished:function () {
                var that=this;
                this.$router.push({name:'Experts',params:{active:that.majorid}});
            }

        },
        watch:{

        },
    }
</script>
<style scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        overflow: hidden;
        background-color: #000000;
        color: #ffffff;
    }
    .head
    {
        width: 100%;
        height: 88px;
        border-bottom: 1px solid rgba(255,255,255,0.4);
        position: relative;
    }
    .head img
    {
        width: 54px;
        height: 45px;
        display: block;
        position: absolute;
        top: 17px;
        left: 10px;
    }
    .head span
    {
        display: block;
        font-size:40px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        opacity:1;
        text-align: center;
        line-height: 88px;
    }
    .menuediv
    {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: 100px;
    }
    .menuediv label
    {
        display: block;
        min-width: 150px;
        height: 46px;
        background:rgba(35,35,35,1);
        border-radius:50px;
        font-size:28px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:46px;
        padding: 10px;
        text-align: center;
        margin-right:20px ;
        margin-bottom: 20px;
    }
    .active
    {
        color: #000000 !important;
        background: #FFE600 !important;
    }
    .finished
    {
        position: absolute;
        width:90%;
        height:86px;
        background:rgba(253,0,0,1);
        border-radius:10px;
        font-size:36px;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(255,255,255,1);
        line-height:86px;
        border: none;
        bottom: 100px;
        left: 5%;
    }

</style>